<script setup lang="ts">
import {ref} from "vue";

const url = ref('https://www.baidu.com');

const doSomething = () => {
  if (url.value.includes('baidu')) {
    url.value = "https://www.gitee.com"
  } else {
    url.value = "https://www.baidu.com"
  }

  console.log('do something');
}
</script>

<template>
  <div>
    <h1>参数 Arguments</h1>
    <p>
      某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML
      attribute.<br/>
      这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。<br/>
      在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。
      <a v-bind:href="url"> ... </a>

      <!-- 简写 -->
      <a :href="url"> ... </a>
      <a v-on:click="doSomething"> 点我更换地址 </a>
      <!-- 简写 -->
      <a @click="doSomething"> 点我更换地址 </a>
    </p>
    <p>当前 URL: {{ url }}</p>
  </div>
</template>

<style scoped>

</style>